
page,body{
  background: var(--bg-color);
  min-height: 100vh;
}
.home{
  background: var(--bg-color);
  padding-top: 170px;
  &.tt{
    padding-top: 0px!important;
    .home-crumbs{
      height: auto!important;
      background: transparent;
    }
  }
  .home-crumbs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: fixed;
    top:0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    z-index: 100;
    color: #fff;
    height: 170px;
    background: var(--bg-color);
    .crumbs-main{
      display: flex;
      align-items: center;
      background: rgba(0, 0, 0, .5);
      padding: 0 10px;
      border-radius: 100px;
      height: 64px;
      .main-logo{
        width: 36px;
        height: 36px;
        border-radius: 8px;
      }
      .h2{
        font-size: 28px;
        margin:0 8px;
        font-weight: 400;
      }
    }
    .crumbs-img{
      width: 40px;
      height: 40px;
      margin-left: 40px;
    }
    .h1{
      color: #fff;
      font-size: 36px;
    }
  }  ///  home-crumbs end

  .home-swiper{
    margin: 6px 24px 0;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    .swiper-main{
      height: 230px;
      border-radius: 16px;
    }
    .img{
      width: 100%;
      height: 230px;
      display: block;
      overflow: hidden;
      border-radius: 16px;
    }
    &.banner{
      margin: 16px 32px;
      border-radius: 0;
      .swiper-main{
        height: 386px;
      }
      .img{
        height: 386px;
      }
    }
  }
  .swiper-img{
    width: 100%;
    height: 386px;
    border-radius: 16px;
  }

  .tabs-swiper {
    height: 280px;
    margin: 48px 0;
    position: relative;
    overflow: inherit;
    &::before{
      position: absolute;
      display: block;
      content: '';
      width: 70%;
      height: 75px;
      opacity: .5;
      filter: blur(85px);
      background: #fff;
      z-index: 0;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .swiper-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .swiper-img {
        transition: 0.1s;
        width: 144px;
        height: 192px;
        border-radius: 8px;
      }

      &.active {
        .swiper-img {
          width: 204px;
          height: 272px;
        }
      }
    }
  }  // tabs-swiper end
  
  .home-tabs{
    padding: 0 32px;
  }

  .tabs-list{
    display: flex;
    overflow-x: auto;
    position: relative;
    z-index: 1;
    .tabs-item{
      padding: 0 24px 10px;
      line-height: 34px;
      font-size: 32px;
      color: #fff;
      font-weight: 700;
      margin-right: 32px;
      white-space: nowrap;
      text-align: center;
      position: relative;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 64px;
        height: 6px;
        background: transparent;
        bottom: 0;
        left: 50%;
        transform: translate(-50%,0);
        border-radius: 6px;
      }
      &.active::after{
        background: var(--theme-color);
      }
      text{
        font-weight: 400;
        font-size: 20px;
        color: #A6A8AA;
      }
    }
  }
  .home-list{
    margin: 32px 24px;
    display: flex;
    overflow-x: auto;
    .list-item{
      padding: 24px;
      color: #90989F;
      font-size: 24px;
      background: #fff;
      margin-right: 20px;
      border-radius: 32px;
      .item-img{
        width: 490px;
        height: 280px;
        border-radius: 20px;
      }
      .h2{
        font-size: 32px;
        color: #30383F;
        margin: 12px 0;
      }
      .item-info{
        .info-icon{
          width: 26px;
          height: 26px;
          margin-right: 10px;
        }
        .info-price{
          display: flex;
          align-items: center;
          .p{
            max-width: 262px;
          }
          .strong{
            color: #FF6933;
            margin-left: auto;
            width: 144px;
            text-align: center;
            border-radius: 16px;
            font-weight: 400;
            font-size: 30px;
          }
        }
      }
    }
  }  ///  .home-list end

  .home-hot{
    padding: 32px;
    padding-top: 0;
    .hot-list{
      // border-left: 1px solid #E4E5E5;
      // padding-bottom: 32px;
      // &:first-child h3::before{
      //   background-color: #f5f6f7;
      //   padding-top: 12px;
      //   top: 0px;
      //   background-position: bottom;
      // }
      border-bottom: 2px solid #FFFFFF26;
      &:last-child{
        border-bottom: 0;
      }
      .h3{
        font-size: 24px;
        font-weight: 500;
        padding-left: 16px;
        margin-bottom: 24px;
        position: relative;
        color:#4B5563;
        &::before{
          display: block;
          content: '';
          width: 16px;
          height: 16px;
          background: url('~@/static/timeline.png') no-repeat;
          background-size: contain;
          position: absolute;
          left: -9px;
          top:12px;
        }
      }
    }
    .hot-item{
      padding:32px 0;
      padding-top: 16px;
      overflow: hidden;
      .h2{
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      .h4{
        font-size: 24px;
        font-weight: 400;
        color: #A6A8AA;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dot{
          max-width: 65%;
        }
      }
      .info-list{
        display: flex;
        flex-wrap: wrap;
        margin: 16px 0 0;
        text{
          padding: 4px 8px;
          font-size: 24px;
          background: rgba(255,255,255,.15);
          margin-right: 16px;
          border-radius: 8px;
          color: #fff;
          margin-bottom: 16px;
          &.red{
            background: #ff0d49;
          }
        }
      }
      .list-item{
        display: flex;
        align-items: center;
        font-size: 20px;
        padding: 20px 16px;
        border-radius: 16px;
        background: #FFFFFF1A;
        .item-h2{
          color: #fff;
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          image,img{
            width: 32px;
            height: 32px;
            margin-right: 8px;
          }
        }
        .item-time{
          color: #C6C8CA;
          margin-right: auto;
        }
        .item-info{
          color: #C6C8CA;
          text-align: right;
        }
        .item-price{
          color: var(--theme-color);
          margin: 0 32px;
        }
        .item-button{
          padding: 8px 16px;
          border-radius: 16px;
          background: var(--theme-color);
          color: #fff;
          font-size: 20px;
        }
      }
      .strong{
        font-weight: 700;
        font-size: 36px;
        margin-bottom: 8px;
      }
    }
  }  /// home-hot end

  .home-title{
    font-size: 32px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    padding-bottom: 32px;
    text{
      color: #90989F;
      font-size: 24px;
      font-weight: 400;
    }
  }
  .other-title{
    font-size: 28px;
    color: #90989F;
    line-height: 1;
    font-weight: 400;
    text-align: center;
    position: relative;
    &::before,&::after{
      position: absolute;
      display: block;
      content: '';
      width: 210px;
      height: 2px;
      top: 50%;
    }
    &::before{
      background: linear-gradient(270deg,#e0e1e2,transparent);
      left: 42px;
    }
    &::after{
      background: linear-gradient(270deg,transparent,#e0e1e2);
      right: 42px;
    }
  }
}

.coupon-popup{
  .popup-title{
    background: url('../../static/header.png') no-repeat;
    color: #fff;
    font-weight: 700;
    width: 600px;
    height: 198px;
    background-size: cover;
    box-sizing: border-box;
    padding-top: 132px;
    font-size:36px;
    text-align: center;
  }
  .popup-list{
    min-height: 366px;
    max-height: 485px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background: #f74b24;
    .list-item{
      display: flex;
      margin: 12px auto;
      width: 542px;
      height: 148px;
      background: url('../../static/coupon.png') no-repeat;
      background-size: cover;
      .item-price{
        width: 152px;
        line-height: 148px;
        text-align: center;
        color: #f00;
        font-size: 48px;
      }
      .item-info{
        flex: 1;
        padding: 12px 24px;
        display: flex;
        flex-direction: column;
        font-size: 22px;
        .h2{
          font-size: 24px;
          font-size: bold;
        }
        .p{
          margin: 4px 0 auto;
          color: #ff3500;
        }
        .time{
          color: #999999;
        }
      }
    }
  }
  .popup-footer{
    border-radius: 0 0 50px 50px;
    background: #f74b24;
    padding-bottom: 30px;
    margin-bottom: 64px;
    .button{
      width: 540px;
      line-height: 110px;
      background: linear-gradient(180deg,#ffec81, #fdb728);
      border-radius: 56px;
      box-shadow: 0px 4px 8px 0px rgba(182,54,59,0.44);
      font-size: 40px;
      margin: 0 auto;
      font-weight: bold;
      color: #ff0000;
      letter-spacing: 2px;
    }
  }
}

.join-message{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 100;
  .message-img{
    width: 136px;
    height: 120px;
  }
  .message-icon{
    position: absolute;
    right: 24px;
    bottom: 34px;
  }
}